<template>
  <div class="home-container">
    <div class="echart-list">
      <div class="echart-li">
        <div><line-echart :nodes="streams" /></div>
        <div><area-echart :nodes="streams" /></div>
        <div><gauge-echart :nodes="streams"/></div>
      </div>
      <div class="echart-li">
        <div><bar-echart :nodes="bmnodes"/></div>
        <div><area-echartbuttom :nodes="bmnodes" /></div>
        <div><pie-echart :nodes="bmnodes" /></div>
      </div>
    </div>
    
  </div>
</template>
<script lang="ts">
import { defineComponent, onUnmounted, getCurrentInstance, ref } from "vue";
import lineEchart from "./components/lineEchart.vue";
import AreaEchart from "./components/areaEchart.vue";
import AreaEchartbuttom from "./components/areaEchartbuttom.vue";
import GaugeEchart from "./components/gaugeEchart/index.vue";
import BarEchart from "./components/barEchart.vue";
import PieEchart from "./components/pieEchart.vue";

export default defineComponent({
  name: 'Home',
  components: {
    lineEchart,
    AreaEchart,
    GaugeEchart,
    BarEchart,
    PieEchart,
    AreaEchartbuttom
},
  setup() {
    const instance: any = getCurrentInstance();
    const GL = instance.appContext.config.globalProperties;
    const streams: any = ref([])
    const bmnodes: any = ref([])
    const pageObj = ref({page:1,size:10,total:80})
    // let num = 10
    // let num2 = 22
    // 点播
    const getQueryVodStream = async() => {
        await GL.$axios.get(GL.$api.video.QueryVodStream,{params: {ServiceID: '', StreamID: ''}})
        .then((res: any) => {
          if(res.Code === 0) {
            res.Vods && res.Vods.map(item => {
              item.AllFlow = item.AllFlow ? item.AllFlow.toFixed(2) : 0
              item.FileSize = item.FileSize ? item.FileSize.toFixed(2) : 0
            })
            bmnodes.value = res.Vods || []
          }
        })
    }
    
    // 直播
    const getQueryStreamList = async() => {
      await GL.$axios.get(GL.$api.video.QueryStreamList, {params: {ServiceID: '', StreamID: '', PageIndex:pageObj.value.page - 1, PageSize:pageObj.value.size}})
        .then((res: any) => {
          if(res.Code === 0) {
            res.Streams && res.Streams.map(item => {
              item.Flow = item.Flow ? item.Flow.toFixed(2) : 0;
              item.InBM = item.InBM ? item.InBM.toFixed(2) : 0;
              item.OutBM = item.OutBM ? item.OutBM.toFixed(2) : 0;
            })
            const newdata = res.Streams && res.Streams.filter(item => item.StreamStatus === 'Publishing')
            streams.value = newdata || []
          }
        })
        .catch((err: any) => {
          console.log(err);
        });
    }
    // 厂商
    const getQueryConfig = async() => {
      GL.$axios.get(GL.$api.video.QueryConfig, {params: {Type: 0}})
      .then((res: any) => {
        if(res.Code === 0) {
          sessionStorage.setItem('config', JSON.stringify(res.Services))
        }
      })
    }

    let timer = setInterval(() => {
      initData()
    }, 10000)

    
    const initData = () => {
      getQueryStreamList()
      getQueryVodStream()
    }
    getQueryConfig()
    initData()

    onUnmounted(() => {
      clearInterval(timer)
    })
    return {
      streams,
      bmnodes
    }
  }
})
</script>
<style lang="scss" scoped>
.echart-list{
  .echart-li{
    display: flex;
    margin-bottom: 20px;
    div{
      width: 100%;
    }
  }
}
</style>
